<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-Equiv="Expires" Content="0" />
    <title>监控列表</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css"/>
</head>
<style>
    body {
        background-color: #FFF;
    }
    .layui-elem-field{
      background: #FFF;
      padding: 20px;
    }
	.grid-demo{
			min-height: 100px;
		    background: #FFF;
		    padding: 10px 10px;
		    border-radius: 2px;
		    box-shadow: 5px 5px 1px #b2b2b2;
	}  
	.div-inline{ display:inline;float: left;width: 460px;margin-left: 20px;} 
</style>
<body>
<div id="main_container">


<div style="padding: 20px; margin-top: 50px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <i class="layui-icon">&#xe68e;</i>
                    <span>首页 / 数据库列表</span>
                </div>
            </div>
        </div>
    </div>

 

   <!-- 栅格 -->
<div class="layui-row layui-col-space5">
   
<fieldset class="layui-elem-field site-demo-button" v-for="instanceList in groupMap" >
  <legend>监控组：{{instanceList[0].groupKey}}</legend>
  <div  class="grid-demo div-inline" v-for="instance in instanceList" >
  			<div class="layui-card-header"><!-- layui-icon  layui-icon-face-surprised  layui-icon-website-->
	        	<i  v-bind:class="{'layui-icon':true,'layui-icon-face-surprised':instance.offLine,'layui-icon-website':instance.onLine}" v-bind:style="{'color':instance.onLine?'blue':'red'}" style="font-size: 26px;color: red;margin-right: 10px;"></i><span >{{instance.instanceKey}} </span>
		        	<div class="layui-btn-group" style="float: right;">
		        	<img alt="这家伙掉线了..." src="/img/warn1.gif" width="40px;" height="30px;" v-if="instance.offLine">
		        	 		<button class="layui-btn layui-btn-sm " v-on:click="toMonitor(instance.instanceKey);"   title="JVM监控" >
    							<i class="layui-icon">&#xe652;</i>
 							  </button>		
							    <button class="layui-btn layui-btn-sm layui-btn-danger " v-on:click="doDelete(instance.instanceKey);" title="删除"  >
							    <i class="layui-icon">&#xe640;</i>
							  </button>		
							  		
						</div>
		        	</div>
    		     <div class="layui-card-body ">		       
			        <p>当前MYSQL监控: </p>
			        <p>最大连接数：<span >{{instance.maxUsedConnections}}</span>  </p>
			        <p>当前连接数：<span >{{instance.threadsConnected}}</span>  </p>
			        <p>运行时间：<span >{{instance.uptime}} 小时</span>  </p>
			         <p>
			        	最后心跳时间：<span >{{instance.date| formatDate }} </span>
			        </p>
			       
			        <div class="layui-progress" style="margin-top: 10px;margin-bottom: 10px;">
			       		 <div class="layui-progress-bar" lay-percent="100%"></div>
			        </div>      
		      	</div>
		 </div>
		 
		 

</fieldset>


 </div>	  
</div>
 
</div>


<script src="/lib/layui/layui.all.js"></script>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/vue.min.js"></script>
<script src="/lib/store.min.js"></script>
<script type="text/javascript">
var padDate=function(va){
    va=va<10?'0'+va:va;
    return va
}

//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
 new Vue({
     el: '#main_container',
     data:  {
    	groupMap:[],
 	    bus:new Vue()
  }, 
	mounted : function() {
		var _this=this;
		_this.loadgroupMap();
		setInterval(_this.loadgroupMap,10000);
	},
	filters:{
        formatDate:function (val) {
        	var _this=this;
            var value=new Date(val);
            var year=value.getFullYear();
            var month=padDate(value.getMonth()+1);
            var day=padDate(value.getDate());
            var hour=padDate(value.getHours());
            var minutes=padDate(value.getMinutes());
            var seconds=padDate(value.getSeconds());
            return year+'-'+month+'-'+day+' '+hour+':'+minutes+':'+seconds;
 
        },
	},
  methods: {
	
	  loadgroupMap: function(){
		  	var　_this=this;
		  	var ajaxUrl="/listMysqlData";
		  	$.ajax({url:ajaxUrl,dataType: "json",type: "post",data:{},
		  	    success: function (data) {
		  	    	_this.groupMap=data;
		  	    }
		  	});
	  	},
	  	doDelete: function(instance){
	  		var ajaxUrl="/deleteMysql";
	  		var　_this=this;
	  		
	  		 var mymessage=confirm("真删了?");
	  	    if(mymessage==true) {
	  	  	$.ajax({url:ajaxUrl,dataType: "json",type: "post",data:{"instanceKey":instance},
		  	    success: function (data) {
		  	    	_this.loadgroupMap();
		  	    	alert("删完了........");
		  	    }
		  	});
	  	   }else{  
	  		 alert("哈哈，是不是手抖了............");
	  		}
	  	    
	  	
	  	},
	  	toMonitor: function(name){
	  		 window.location.href="/mysqlmonitor?pid="+name;
	  	},
	  	showLog: function(){
	  		alert("开发中.....")
	  	}
 }
})


</script>
</body>
</html>